<template>
  <div id="previewPdf">
      <div class="back" @click="back"><i class="el-icon-back"></i>&nbsp;返回</div>
      <iframe :src="previewUrl" name="previewPdf" class="preview-Pdf"></iframe>
  </div>
</template>

<script>
export default {
  name: 'previewPdf',
  data () {
    return {
      previewUrl : this.$route.query.previewUrl
    }
  },
  methods:{
      init_style:function(){
        $("#searchInput").addClass("search-up")
        $('.mask').hide()
        $(".logo").addClass("logo-up")
        $('.start-search').hide()
        $('.genre').hide()
        $('body').removeClass('change-bg')
        $("#footer").removeClass("home-footer")
        $('.input-box').hide()
        setTimeout(() => {
            this.loading_show = false
            this.article_show = true
        }, 2000);
      },
      back:function() {
        window.history.back()
      }
  },
  created:function() {

  },
  mounted:function() {
    this.init_style()
    window.scrollTo(0,0)
  },
  destroyed:function () {
    $('.input-box').show()
  }
}
</script>

<style>
body {
  overflow: auto;
}
.preview-Pdf {
  width: 80%;
  margin: 0 auto;
  margin-top:1%;
  height: 49em; 
  position: relative;
  z-index: 998;
}
.back {
  width: 250px;
  margin: 0 auto;
  margin-left: 200px;
  position: relative;
  top: 10px;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  z-index: 999;
}

/*媒体查询适配移动端*/
@media screen and (max-width:700px) {
  .preview-Pdf {
    width: 100%;
    margin-top: 3vh;
    height: 90vh;
  }
  .back {
    margin-left: 10px;
  }
}
</style>
